<template>
	<view class="setTab-container">
		<view class="setTab-myTab-container">
			<view class="myTab-edit">
				<text>我的标签</text>
				<text @click="editTab" class="myTab-edit-text"
					:class="isEdit?'fulfil-text':''">{{isEdit ? "完成" : "编辑"}}</text>
			</view>
			<view v-if="myLabelList.length" class="setTab-list-content">
				<view @click="deleteLabelList(item._id)" class="setTab-list-item" v-for="item in myLabelList"
					:key="item._id">
					{{item.name}}
					<uni-icons v-if="isEdit" class="list-item-end" type="clear" color="red" size="20"></uni-icons>
				</view>
			</view>
			<view class="setTab-not" v-else>
				当前没有数据
			</view>
		</view>
		<view class="setTab-suggest-contianer">
			<view class="suggest-tab">
				<text>标签推荐</text>
			</view>
			<view v-if="suggestList.length" class="setTab-list-content">
				<view @click="addLabelList(item._id)" class="setTab-list-item" v-for="item in suggestList"
					:key="item._id">
					{{item.name}}
				</view>
			</view>
			<view class="setTab-not" v-else>
				当前没有数据
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				isEdit: false,
				labelIds: [],
			}
		},
		watch: {
			userInfo: {
				immediate: true,
				handler(newVal, oldVal) {
					this.labelIds = this.userInfo.labelList_likes_ids
				}
			}
		},
		computed: {
			...mapState(['labelList', 'userInfo']),
			//已选标签
			myLabelList() {

				return this.labelList.filter(item => this.labelIds.includes(item._id))
			},
			//推荐标签
			suggestList() {

				return this.labelList.filter(item => !this.labelIds.includes(item._id) && item._id)
			}
		},
		methods: {
			//编辑标签
			editTab() {

				//判断当前状态
				if (this.isEdit) {
					//完成
					this.updataLabel()
					this.isEdit = !this.isEdit
				} else {
					//编辑
					this.isEdit = !this.isEdit

				}
			},
			//发送修改标签请求
			async updataLabel() {
				const labelListIds = this.myLabelList.map(item => item._id)
				const res = await this.$http.updata_label_ids({
					userId: this.userInfo._id,
					labelListIds
				})
				uni.showToast({
					title: res.msg,
					icon: "none"
				})
				//保存到vx
				this.updetaUserInfo({
					...this.userInfo,
					labelList_likes_ids: labelListIds
				})
			},
			//添加推荐标签
			addLabelList(id) {
				if (!this.isEdit) return
				this.labelIds.push(id)
			},
			//删除我的标签
			deleteLabelList(id) {
				if (!this.isEdit) return
				this.labelIds.splice(this.labelIds.indexOf(id), 1)

			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>

<style lang="scss" scoped>
	@import "css/setTab.scss"
</style>
